﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>
    อิฐบล็อกซีรีย์</h2>
<div class="form-horizontal">
    <fieldset>
        <legend>แสดงรายการข้อมูลอิฐบล็อกซีรีย์</legend>
        <div class="control-group">
            <label class="control-label" for="input01">
                ชื่อซีรีย์:</label>
            <div class="controls">
                <input type="text" class="input-xlarge" id="input01" />
                <p class="help-block">
                    กรอกส่วนใดส่วนหนึ่งของซีรีย์เพื่อใช้ค้นหา</p>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
            </label>
            <div class="controls">
                <input type="button" class="btn btn-primary" id="btnSubmit" value="ค้นหา" />
                <input type="button" class="btn" id="btnClear" value="ล้างข้อมูล" />
            </div>
        </div>
        <div class="control-group">
            <table id="list">
            </table>
            <div id="pager">
            </div>
        </div>
    </fieldset>
</div>
<script type="text/javascript">

    $(document).ready(function () {

        initialGrid();

        $("#btnSubmit").click(function () {
            doSearch();
        });

        $("#btnClear").click(function () {
            doClear();
        });

    });

    function doSearch() {

        var keyword = $("#input01").val();

        var params = {
            keyword: keyword
        };

        $('#list').jqGrid('clearGridData');
        $('#list').setGridParam({ url: '/BlockSeries/SeriesList', postData: params }).trigger('reloadGrid');
    }

    function doClear() {
        $("#input01").val("");
        $('#list').jqGrid('clearGridData');
    }

    function initialGrid() {

        var updateDialog = {
              url: '/Material/Update'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , recreateForm: true
                , ajaxGridOptions: { traditional: true }
                , beforeShowForm: function (form) {
                    // "editmodlist"
                    var grid = $('#list');
                    var dlgDiv = $("#editmod" + grid[0].id);
                    var dlgWidth = dlgDiv.width();
                    var dlgHeight = dlgDiv.height();

                    if (dlgDiv[0] == undefined) {
                        dlgDiv = $("#delmod" + grid[0].id);
                        dlgDiv[0].style.width = "350px";
                        dlgWidth = dlgDiv.width();
                    }

                    dlgDiv[0].style.left = Math.round(($(window).width() - dlgWidth) / 2) + "px";
                }
                , afterShowForm: function (formId) {

                }
                , afterclickPgButtons: function (whichbutton, formid, rowid) {

                }
                , modal: true

                , onclickSubmit: function (params) {
                    var ajaxData = {};

                    var list = $("#list");
                    var selectedRow = list.getGridParam("selrow");
                    var rowData = list.getRowData(selectedRow);
                    ajaxData = { supplier_id: rowData.supplier_id };

                    return ajaxData;
                }
                , width: "550"
        };

        var delDialog = {
            url: '/Block/Delete'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , recreateForm: true
                , beforeShowForm: function (form) {
                    // "editmodlist"
                    var grid = $('#list');
                    var dlgDiv = $("#delmod" + grid[0].id);
                    var dlgWidth = dlgDiv.width();

                    dlgDiv[0].style.left = Math.round(($(window).width() - dlgWidth) / 2) + "px";
                }
                , modal: true
                , onclickSubmit: function (params) {
                    var ajaxData = {};

                    var list = $("#list");
                    var selectedRow = list.getGridParam("selarrrow");
                    ajaxData = { ids: selectedRow };

                    return ajaxData;
                }
                , ajaxOptions: { traditional: true }
                , width: "350"
        };

        $.jgrid.nav.addtext = "";
        $.jgrid.nav.edittext = "";
        $.jgrid.nav.deltext = "";
        $.jgrid.edit.addCaption = "เพิ่มรายการอิฐบล็อก";
        $.jgrid.edit.editCaption = "แก้ไขรายการอิฐบล็อก";
        $.jgrid.del.caption = "ลบรายการ";
        $.jgrid.del.msg = "ต้องการลบรายการนี้หรือไม่?";

        $("#list").jqGrid({
            datatype: 'json',
            mtype: 'POST',
            colNames: ['id', 'ชื่อซีรีย์'],
            colModel: [
                    { name: 'series_id', index: 'series_id', align: 'left', key: true, editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                    { name: 'series_name', index: 'series_name', align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true }, editoptions: { dataInit: function (elem) { $(elem).width(350); } }, formoptions: { elmsuffix: ' *'} }],
            pager: $('#pager'),
            rowNum: 10,
            width: 890,
            height: 300,
            rownumbers: true,
            multiselect: false,
            sortname: 'series_name',
            sortorder: "asc",
            gridview: true,
            viewrecords: true,
            shrinkToFit: true,
            ajaxGridOptions: { cache: false },
            caption: 'รายการอิฐบล็อก',
            autowidth: false,
            subGrid: false,
            subGridRowExpanded: function(subgridId, mainRowId) { // mainRowId คือ ID ของ Material
                
                var subgridTableId; // id ของ Grid ที่แสดงรายการขั้นตอนการดำเนินงาน
                var subgridPagerId; // id ของ Pager ของ Grid ที่แสดงขั้นตอนการดำเนินงาน
                subgridTableId = subgridId+"_t";
                subgridPagerId = "p_" + subgridTableId;
                jQuery("#"+subgridId).html("<table id='"+subgridTableId+"' class='scroll'></table><div id='" + subgridPagerId + "' class='scroll'></div>");

                jQuery("#"+subgridTableId).jqGrid({
                    url:'/Block/PriceList',
                    postData: {matid: mainRowId},
                    datatype: "json",
                    mtype: 'POST',
                    colNames: ['id', 'ราคาขาย','ต้นทุน', 'วันที่ปรับปรุง'],
                    colModel: [
                                { name: 'area_type_step_id', index: 'area_type_step_id', width: 40, align: 'left', key: true, editable: false, hidden: true },
                                { name:"sale_price", index:"sale_price", width:50, key: false, editable: false, align: 'right'},
                                { name: "purchase_price", index: "purchase_price", width: 50, key: false, editable: false, align: 'right'},
                                { name: "created_date", index: "created_date", width: 50, key: false, align: 'left', editable: true }
                    ],
                    height: '100%',
                    rowNum: 20,
                    width: 400,
                    viewrecords: true,
                    rownumbers: true,
                    sortname: 'created_date',
                    sortorder: "asc",
                    caption: 'ประวัติการปรับราคา',
                    pager: subgridPagerId
                    
                    }).navGrid('#' + subgridPagerId,
                                {
                                    edit: false, add: false, del: false, search: false, refresh: true
                                }
                            );

            },
        }).navGrid('#pager',
                {
                    edit: true, add: true, del: true, search: false, refresh: true
                },
                updateDialog,
                updateDialog,
                delDialog
            );

    }

</script>
